<template>
	<view class="resetPassword-wrapper">
		<top-nav title="更改密码"></top-nav>
		<view class="input">
			<view class="list">
				<view class="label">新密码</view>
				<view class="input-content">
					<u-input v-model="password" type="password" :custom-style="inputClass" placeholder="请输入新密码" />
				</view>
			</view>
			<view class="list">
				<view class="label">确定密码</view>
				<view class="input-content">
					<u-input v-model="checkPassword" type="password" :custom-style="inputClass" placeholder="请重新输入新密码" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<my-button @clickFun="clickFun">确定</my-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	import button from './components/button.vue';
	import md5Libs from "uview-ui/libs/function/md5";
	export default{
		components:{
			topNav:topNav,
			myButton:button
		},
		methods:{
			gotoShare(){
				uni.navigateTo({
				    url: '/pages/share/share'
				});
			},
			clickFun(){
				if(!this.password || !this.checkPassword){
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error',
					})
					return false
				}
				if(this.password!=this.checkPassword){
					this.$refs.uToast.show({
						title: '确认密码不正确',
						type: 'error',
					})
					return false
				}
				const params = {
					account_id:uni.getStorageSync('account_id'),
					password:md5Libs.md5(this.password),
					checkPassword:md5Libs.md5(this.checkPassword),
				}
				this.$u.post('/api/editPassword', params).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '更改成功',
							type: 'success',
						})
					} else {
						this.requireShow=true;
						this.requireContent=res.message;
					}
				})
			}
		},
		data(){
			return {
				password:'',
				password2:'',
				checkPassword:'',
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resetPassword-wrapper{
		padding:20*2rpx 20*2rpx 0;
		height:100%;
		box-sizing: border-box;
		.input{
			.list{
				margin-bottom:30*2rpx;
				font-size:14px;
				.label{
					font-size:14*2rpx;
					opacity: 0.5;
				}
				.input-content{
					.input-info{
						line-height:35px;
					}
				}
			}
		}
		.bottom{
			height:110*2rpx;
			background-color: #202020;
			width: 100%;
			bottom: 0;
			position: fixed;
			left:0;
			
		}
	}
</style>
